<template>
<div>
    <!-- 展示订单详情的结构 -->
   <el-card class="box-card">
    <!--卡片头部的结构-->
    <template #header>
      <div class="detail">挂号详情</div>
    </template>
    <!--展示身体部分的顶部结构-->
    <div class="top">
        <!--左侧标签-->
        <el-tag class="ml-2" type="success">
            <div class="tag">
            <svg t="1719165748359" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2330" width="16" height="16"><path d="M416.832 798.08C400.64 798.08 384.512 791.872 372.16 779.52L119.424 525.76C94.784 500.992 94.784 460.8 119.424 436.032 144.128 411.264 184.128 411.264 208.768 436.032L416.832 644.928 814.4 245.76C839.04 220.928 879.04 220.928 903.744 245.76 928.384 270.528 928.384 310.656 903.744 335.424L461.504 779.52C449.152 791.872 432.96 798.08 416.832 798.08Z" fill="#1afa29" p-id="2331"></path></svg>
            <span>{{ orderInfo.param?.orderStatusString }}</span>
            </div>
        </el-tag>
        <div class="right_info">
            <img src="../../../../assets/img/code_app.png">
            <div class="info">
                <p>微信  关注 “北京114预约挂号”</p>
                <p>“快速预约挂号”</p>
            </div>
        </div>
    </div>
    <!--订单详情底部结构-->
    <div class="bottom">
        <div class="left">
            <!--左侧展示订单详情信息-->
        <el-descriptions class="margin-top" :column="1" border>
        <el-descriptions-item>
        <template #label>
            <div class="cell-item">
                就诊人信息
            </div>
        </template>
        {{ orderInfo.patientName }}
        </el-descriptions-item>
        <el-descriptions-item>
        <template #label>
            <div class="cell-item">
                就诊日期
            </div>
        </template>
        {{ orderInfo.reserveDate  }}
        </el-descriptions-item>
        <el-descriptions-item>
        <template #label>
            <div class="cell-item">
                就诊医院
            </div>
        </template>
        {{ orderInfo.hosname }}
        </el-descriptions-item>
        <el-descriptions-item>
        <template #label>
            <div class="cell-item">
                就诊科室
            </div>
        </template>
        {{ orderInfo.depname }}
        </el-descriptions-item>
        <el-descriptions-item>
        <template #label>
            <div class="cell-item">
                医生职称
            </div>
        </template>
        {{ orderInfo.title }}
        </el-descriptions-item>
        <el-descriptions-item>
        <template #label>
            <div class="cell-item">
                医生服务费
            </div>
        </template>
        <span style="color:red">{{ orderInfo.amount }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
        <template #label>
            <div class="cell-item">
                挂号订单
            </div>
        </template>
        {{ orderInfo.outTradeNo}}
        </el-descriptions-item>
        <el-descriptions-item>
        <template #label>
            <div class="cell-item">
                挂号时间
            </div>
        </template>
        {{ orderInfo.createTime }}
        </el-descriptions-item>
        </el-descriptions>
        <div class="btn" v-if="orderInfo.orderStatus==0 || orderInfo.orderStatus == 1">
            <el-popconfirm title="确定取消预约吗?" width="155px" @confirm="cancel">
                <template #reference>
                    <el-button>取消预约</el-button>
                </template>
            </el-popconfirm>
        <el-button type="primary" size="default" v-if="orderInfo.orderStatus == 0" @click="openDialog">支付</el-button>
        </div>
        </div>
        <div class="right">
            <el-card class="box-card">
                <template #header>
                <div class="card-header">
                    <span>注意事项</span>
                </div>
                </template>
                <p>1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；</p>
                <p style="color: red">2.【取号】就诊当天需在{{ orderInfo.fetchTime }}前
                    在医院取号，未取号视为爽约，该号不退不换；
                </p>
                <p>3.【退号】在{{ orderInfo.quitTime }}前可在线退号 ，逾期将不可办理退号退费；</p>
                <p>4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；</p>
                <p>5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</p>
            </el-card>
        </div>
    </div>
  </el-card>
    <!-- 展示支付二维码的结构 -->
    <el-dialog @close="close" v-model="dialogVisible" title="微信支付" width="400">
      <!-- 支付需要使用的二维码图片 -->
      <div class="qrocde">
        <img :src="imgUrl" alt="" />
        <p>请使用微信扫一扫</p>
        <p>扫描二维码支付</p>
      </div>
      <!-- 对话框底部插槽传递结构 -->
      <template #footer>
        <el-button type="primary" size="default" @click="closeDialog">关闭窗口</el-button>
      </template>
    </el-dialog>
</div>
</template>
  
  <script setup lang="ts">
  import { onMounted,ref } from 'vue';
  import { reqOrderInfo,reqCancelOrder,reqQrcode, reqQueryPayState} from '../../../../api/user';
  import { useRoute } from 'vue-router';
  import type { PayReslt, OrderResponseData,  QrCode} from '../../../../api/user/type';
  //@ts-ignore
  import { ElMessage } from "element-plus";
  //生成二维码插件qrcode
  //@ts-ignore
  import QRCode from "qrcode";
  let $route = useRoute();
  let imgUrl = ref<string>("");
  let dialogVisible = ref<boolean>(false);
  let orderInfo = ref<any>({});
  let timer = ref<any>();
  //组件挂载完毕
  onMounted(()=>{
    getOrderInfo();
  });
  const getOrderInfo = async ()=>{
    let result: OrderResponseData  =  await reqOrderInfo($route.query.orderId as string);
    if(result.code==200){
        orderInfo.value = result.data
    }
  };
  //取消订单  订单状态有三种 orderStatus -1 取消预约 0 预约但是没有支付 1 支付成功
  const cancel = async ()=>{
     try {
        await reqCancelOrder($route.query.orderId as string);
        getOrderInfo();
     } catch (error) {
        ElMessage({
            type:'error',
            message:'取消预约失败',
        })
     }
  };

  //点击支付按钮的回调
const openDialog = async () => {
  dialogVisible.value = true;
  let result: QrCode = await reqQrcode($route.query.orderId as string);
  imgUrl.value = await QRCode.toDataURL(result.data.codeUrl);

  timer.value = setInterval(async () => {
    let result: PayReslt = await reqQueryPayState($route.query.orderId as string);
    //如果服务器返回的数据data:true,代表支付成功
    if (result.data) {
      dialogVisible.value = false;
      ElMessage({
        type: "success",
        message: "支付成功",
      });
      clearInterval(timer.value);
      getOrderInfo();
    }
  }, 2000);
};
//关闭窗口的回调
const closeDialog = () => {
  dialogVisible.value = false;
  clearInterval(timer.value);
};
//对话框右上角关闭的叉子的回调
const close = ()=>{
  clearInterval(timer.value);
}
  </script>
  
  <style scoped lang="scss">
  .box-card{
    .detail{
        color:#7f7f7f;
        font-weight: 900;
        font-size: 20px;
    }
    .top{
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        padding: 10px;
        .tag{
            display: flex;
            justify-content: center;
            align-items: center;
            span{
                margin-left: 5px;
            }
        }
        .right_info{
            display: flex;
            justify-content: space-between;
            align-items: center;
            img{
                width: 40px;
                height: 40px;
            }
            .info{
                margin-left: 10px;
                p{
                    font-size: 12px;
                    line-height: 20px;
                }
            }
        }
    }
    .bottom{
        display: flex;
        margin-top: 20px;
        .left{
            flex: 4;
            .btn{
                margin: 10px 0px;
            }
        }

        .right{
            margin-left: 20px;
            flex: 6;
            p{
                line-height: 40px;
            }
        }
    }
  }

::v-deep(.el-dialog__body) {
  border-top: 1px solid #7f7f7f;
  border-bottom: 1px solid #7f7f7f;
}

.qrocde {
  display: flex;
  flex-direction: column;
  align-items: center;
  p {
    line-height: 30px;
  }
}
  </style>